<template>
  <view :class="$style.linkage_container">
    <view :class="$style.title">{{ titleName }}</view>

    <view :class="$style.statistic" class="flex justify-center items-baseline">
    </view>

    <view :class="$style.content">
      <view v-for="(item, index) in contacts" :key="index" class="flex justify-between"
        style="margin:15rpx 0  15rpx 0; ">
        <view :class="$style.power_info" class="flex">
          <view :class="$style.organization">{{ item.glrtitle }} : </view>
          <view :class="$style.contact_name">{{ item.name }}</view>
          <view :class="$style.contact_name">{{ item.phone }}</view>
        </view>
        <image :src="phoneImg" mode="widthFix" style="width: 40rpx; margin-right: 20rpx;" />
      </view>

    </view>

  </view>

</template>

<script setup lang='ts'>
import { ref } from "vue";
import phoneImg from "@/static/images/alert-detail/phone.png";
const titleName = ref<string>("联系人");

const contacts = ref<Array<any>>([
  {
    glrtitle: '消防安全管理人',
    name: '王强',
    phone: '18790987367',
  },
  {
    phone: '18790987367',
    glrtitle: '消防安全负责人',
    name: '王强',
  },
  {
    phone: '18790987367',
    glrtitle: '消防应急网格长',
    name: '王强',
  },
  {
    phone: '18790987367',
    glrtitle: '微型消防站主管',
    name: '王强',
  },
]);
</script>

<style lang='less' module>
.linkage_container {
  width: calc(100% - 60rpx);
  min-height: 150rpx;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 19rpx 1rpx rgba(51, 51, 51, 0.2);
  padding: 10rpx 10rpx 10rpx 20rpx;
  border-radius: 20rpx;
  font-family: Microsoft YaHei;

  .title {
    font-size: 30rpx;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333
  }

  .statistic {
    font-weight: bold;
    color: #2264d3;
    line-height: 40px;

    .number {
      font-size: 60rpx;
    }

    .text {
      font-size: 26rpx;
    }
  }

  .content {
    font-size: 26rpx;
    font-weight: 400;
    color: #999999;

    .organization {
      margin-left: 15rpx;
    }

    .contact_name {
      margin-left: 15rpx;
    }

    .state {
      margin-left: 20rpx;
      background: #00d195;
      border-radius: 8rpx;
      padding: 5rpx 10rpx;
      font-size: 22rpx;
      color: #ffffff;
    }
  }
}
</style>
